<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Vue3 Demo1</title>
    <!-- CDN导入Vue3（仅适于学习和测试） -->
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      /* 加边框方便观察区域 */
      div { border: dotted blue 1px; margin: 4px; }
      span { border: dotted gray 1px; margin: 4px; }
    </style>
  </head>
  <body>

    <h3>按F12显示开发工具，关注：Inspector（页面结构）、Console（报错）、Network（网络请求）。</h3>

    <div id="decl-demo">
      <span>{{info}}</span>
      <span v-bind:title="mesg">绑定title属性（鼠标悬停查看）</span>
      <ul>
        <li><span v-once>{{once_msg}}</span></li>
        <li><div v-html="hyper_text"></div></li>
        <li><a :href="url" target=_blank>v-bind-href</a></li>
        <li>v-bind:img.src: <img :src="img_src" alt="" /></li>
        <li><button v-bind:onclick="demo_handler">v-bind-onclick</button></li>
      </ul>
    </div>

    <div id="hook-demo">
      mounted事件创建定时器递增计数：{{counter}}
    </div>

    <div id="list-demo">列表渲染：
      <ol>
        <li v-for="it in items">
          {{ it.text }}
        </li>
      </ol>
    </div>

<script>

const DeclDemo = {
  data() {
    return {
      info: "文本插值",
      mesg: '绑定的悬浮提示' + new Date().toLocaleString(),
      title: "Vue3 Demo1",
      once_msg: "v-once-demo",
      hyper_text: "<span style='color: orange;'>v-html-demo</span>",
      img_src: "favicon.ico",
      url: "https://www.sdu.edu.cn/",
      demo_handler: "alert('ok')"
    }
  }
}

Vue.createApp(DeclDemo).mount('#decl-demo');

const HookDemo = {
  data() {
    return { counter: 0 }
  },
  beforeCreate() { console.log('hook: beforeCreate'); },
  created() { console.log('hook: created'); },
  beforeMount() { console.log('hook: beforeMount'); },
  mounted() { // 事件：挂载到元素时创建定时器，每1000毫秒调用匿名函数（lambda）
    console.log('hook: mounted');
    setInterval(() => {
      this.counter += 1;
    }, 1000)
  },
  beforeUnmount() { console.log('hook: beforeUnmount'); },
  unmounted() { console.log('hook: unmounted'); },
}

Vue.createApp(HookDemo).mount('#hook-demo');

const ListRendering = {
  data() {
    return {
      items: [
        { text: 'C++' },
        { text: 'Java' },
        { text: 'Python' }
      ]
    }
  }
}

Vue.createApp(ListRendering).mount('#list-demo')

function post(url, arg, success, failure, async){
  /* 发送POST请求。
   * url：String。请求的网址。
   * arg：JSON。请求数据。为JSON对象。
   * success：函数。为成功响应，接收1个JSON对象参数。
   * failure：函数。可选。失败响应，接收1个HTTP状态码。
   * async：Boolean。可选。为true或不设置时发送异步请求，否则发送同步请求。
  */
  const xhr = new XMLHttpRequest(); // 虽然名字含XML，但其实能发送任意HTTP请求。
  xhr.open('POST', url, (async === undefined ? true : async))
  xhr.onreadystatechange = function() {
    console.log('xhr.readyState=' + xhr.readyState + ', status=' + status)
    if(xhr.readyState == 4) {
      if(xhr.status == 200){
        const rsp = JSON.parse(xhr.response)
        success(rsp)
      }else if(xhr.status >= 400 && failure !== undefined){
        failure(xhr.status)
      }
    }
  }
  const data = JSON.stringify(arg)
  xhr.send(data)
}

post("https://api.weibo.com/2/common/get_country.json",
  {info: "hello"}, function(rsp){ console.log(rsp) }, function(status){ alert(status) })
</script>
  </body>
</html>
